<template>
  <div class="chart-card">
    <div class="chart-header">
      <span class="title">体校在读人数</span>
    </div>
    <div class="radio-group-wrapper">
      <el-radio-group v-model="activeTab" size="small">
        <el-radio-button label="小学">小学</el-radio-button>
        <el-radio-button label="初中">初中</el-radio-button>
      </el-radio-group>
    </div>
    <div class="chart-content">
      <div class="chart-area">
        <div class="total-wrapper">
          <div class="total-number">47,201</div>
        </div>
        <div ref="chart" class="chart-container"></div>
      </div>
      <div class="data-list">
        <div class="data-item" v-for="(item, index) in chartData" :key="index">
          <div class="item-name">
            <span
              class="color-dot"
              :style="{ backgroundColor: item.itemStyle.color }"
            ></span>
            <span>{{ item.name }}</span>
          </div>
          <div class="item-value">{{ formatNumber(item.value) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "SchoolDistributionChart",
  data() {
    return {
      chart: null,
      activeTab: "小学",
      chartData: [
        { value: 34201, name: "体育运动学校", itemStyle: { color: "#409EFF" } },
        { value: 12803, name: "竞技学校", itemStyle: { color: "#E6A23C" } },
        { value: 6803, name: "体育中心", itemStyle: { color: "#F56C6C" } },
        {
          value: 6201,
          name: "少儿体校(业余体校)",
          itemStyle: { color: "#67C23A" }
        },
        { value: 6201, name: "单项体校", itemStyle: { color: "#909399" } }
      ]
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    formatNumber(num) {
      return num.toLocaleString();
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)"
        },
        series: [
          {
            type: "pie",
            radius: ["65%", "80%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: this.chartData,
            emphasis: {
              scale: true,
              scaleSize: 10
            }
          }
        ]
      };
      this.chart.setOption(option);
      // 监听父元素大小变化
      var ro = new ResizeObserver(entries => {
        for (let entry of entries) {
          const cr = entry.contentRect;
          this.chart.resize();
        }
      });

      ro.observe(this.$refs.chart);
    }
  }
};
</script>

<style scoped>
.chart-card {
  height: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

.title {
  font-size: 16px;
  font-weight: bold;

  color: #303133;
}

.chart-content {
  display: flex;
}

.chart-area {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-group-wrapper {
  background-color: #f5f7fa;
  margin: 10px 0;
}

.total-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background-color: rgb(238 244 254);
  width: 45%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.total-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 150%;
  font-weight: bold;
  color: #303133;
}

.chart-container {
  width: 100%;
  height: 300px;
}

.data-list {
  width: 220px;
  margin-left: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.data-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.data-item:last-child {
  margin-bottom: 0;
}

.item-name {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
  min-width: 120px;
}

.color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}

.item-value {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}
</style>
